<!DOCTYPE html>
<html>
	 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <div id="app">
			       <div :class="{active:isActive,'text-danger':hasError}"> 
				       这是一个动态样式的 div                     字符串
				   </div>
			     <button @click="toggleActive">切换 active 状态</button>
			     <button @click="toggleError">切换 error 状态</button>
				 
				 
				 
				 <div :class="classObj">
					   这是一个动态样式的 div                   对象
				 </div>
				 <button @click="toggleObjActive">切换 active 状态</button>
				 <button @click="toggleObjError">切换 error 状态</button>
				 
				 
				 
				 <div :class="[activeClass,hasErrorClass]">
				 	   这是一个动态样式的 div                   数组
				 </div>
				 <button @click="toggleArrActive">切换 active 状态</button>
				 <button @click="toggleArrError">切换 error 状态</button>
		 </div>
		
	</body>
	
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				isActive:true,
				hasError:true,
				classObj:{
					  active: true,
					  'text-danger': true
				},
				activeClass:"active",
				hasErrorClass:"text-danger",
				
			},
			methods:{
				toggleActive:function(){
					this.isActive=!this.isActive;
				},
				toggleError:function(){
					this.hasError =!this.hasError;
				},
				toggleObjActive:function(){
					this.classObj.active =!this.classObj.active;
				},
				toggleObjError:function(){
				 this.classObj['text-danger'] = !this.classObj['text-danger'];
				},
				toggleArrActive:function(){
					  // 如果 activeClass 是 "active"，就把它设置为 null；否则设置为 "active"
					    this.activeClass = this.activeClass === "active" ? null : "active";
				},
				toggleArrError:function(){
				       // 如果 hasErrorClass 是 "text-danger"，就把它设置为 null；否则设置为 "text-danger"
				           this.hasErrorClass = this.hasErrorClass === "text-danger" ? null : "text-danger";
				}
			}
			
		});
		
	</script>
	
	<style>
		.active {
		  background-color: green;
		  color: white;
		}
		.text-danger {
		  color: red;
		  font-weight: bold;
		}
		
	</style>
</html>
